<template>
	<div class="teacher_action">
		<div class="reading_banner">
			<div class="back_alrdy" @click="back()"></div>
			<div class="active_time">
				06月19日-08月31日
			</div>
		</div>
		<div class="rank_integral">
			<div class="my_rank">
				<div class="my_border">我的排名</div>
	
				<div class="rank_much"><span class="rank_icon"></span>{{teascore}}</div>
			</div>
			<div class="my_interal">
				<div class="my_border">我的积分</div>
				<div class="interal_much"><span class="score_icon"></span>{{tearank}}</div>
			</div>

		</div>
	</div>
</template>
<script type="text/ecmascript-6">
	export default {
		  data () {
	       return {
	    
			}
	    },			
		created() {
			this.$store.commit('hidefooter');
			this.$http.get(domain + '/API/SummerAct/GetSortByInte', {
				params: {
					'intcityID':this.$store.state.city_id,
					'intType': 1,
					'intUserID': this.$store.state.tea_id
				}
			}).then(res => {
				let teamsg=res.body[0];
				if(!teamsg) return;
				this.$store.commit('changeTeaMsg',teamsg);
			})
		},
		methods: {
			back() {
				this.$router.go(-1)
			}
		},
		computed: {
			teascore() {
				return this.$store.state.tea_paiming;
			},
			tearank() {
				return this.$store.state.tea_jifen;
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	@import "../../../assets/scss/_mixin";
	.teacher_action {
		background-color: #fff7b3;
		.reading_banner {
			box-sizing: border-box;
			padding-top: 15px/$ppr;
			width: 720px/$ppr;
			height: 494px/$ppr;
			background-image: url(./img/teacher_banner.png);
			background-size: 100% 100%;
			.back_alrdy {
				width: 66px/$ppr;
				height: 66px/$ppr;
				background-image: url(./img/back_alrdy.png);
				background-size: 100% 100%;
				margin-left: 20px/$ppr;
			}
			.active_time {
				text-align: center;
				margin-top: 300px/$ppr;
				font-size: 24px/$ppr;
				color: #f4fb32;
			}
		}
		.rank_integral {
			width: 720px/$ppr;
			height: 120px/$ppr;
			padding-top: 14px/$ppr;
			.my_rank {
				width: 50%;
				float: left;
				.my_border {
					box-sizing: border-box;
					width: 268px/$ppr;
					height: 56px/$ppr;
					margin-left: 50px/$ppr;
					background-image: url(img/my_rank.png);
					background-size: 100% 100%;
					padding-left: 96px/$ppr;
					line-height: 56px/$ppr;
					color: #333333;
					font-size: 30px/$ppr;
					font-weight: 900;
				}
				.rank_much {
					margin-top: 15px/$ppr;
					box-sizing: border-box;
					width: 268px/$ppr;
					height: 56px/$ppr;
					margin-left: 50px/$ppr;
					padding-left: 96px/$ppr;
					/*line-height: 56px/$ppr;*/
					color: #fc4c33;
					font-size: 40px/$ppr;
					font-weight: 900;
					.rank_icon {
						display: inline-block;
						width: 39px/$ppr;
						height: 34px/$ppr;
						background: url(img/icon_pm.png);
						background-size: 100%;
						margin-right: 20px/$ppr;
						vertical-align: center;
					}
				}
			}
			.my_interal {
				width: 50%;
				float: left;
				.my_border {
					box-sizing: border-box;
					width: 268px/$ppr;
					height: 56px/$ppr;
					margin-left: 50px/$ppr;
					background-image: url(img/my_interal.png);
					background-size: 100% 100%;
					padding-left: 48px/$ppr;
					line-height: 56px/$ppr;
					color: #333333;
					font-size: 30px/$ppr;
					font-weight: 900;
				}
				.interal_much {
					margin-top: 15px/$ppr;
					box-sizing: border-box;
					width: 268px/$ppr;
					height: 56px/$ppr;
					margin-left: 50px/$ppr;
					padding-left: 48px/$ppr;
					/*line-height: 56px/$ppr;*/
					color: #fc4c33;
					font-size: 40px/$ppr;
					font-weight: 900;
					.score_icon {
						display: inline-block;
						width: 36px/$ppr;
						height: 36px/$ppr;
						background: url(img/icon_jf.png);
						background-size: 100%;
						margin-right: 20px/$ppr;
						vertical-align: bottom;
					}
				}
			}
		}
	}
</style>